<!--
 * @Description: 登录页面
 * @Version: 1.0
 * @Author: tao
 * @Date: 2021-01-15 20:53:42
 * @LastEditors: tao
 * @LastEditTime: 2021-04-19 15:04:15
-->
<template>
  <div class="container">
    <div class="login">
      <div class="title">后台管理系统</div>
      <div class="form">
        <a-input class="input" v-model.trim="userId" placeholder="账号">
          <a-icon slot="prefix" type="user" />
        </a-input>
        <a-input
          class="input"
          type="password"
          v-model.trim="password"
          placeholder="密码"
          @keyup="keyUp"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0, 0, 0, 0.25)"
          />
        </a-input>
        <a-button
          type="primary"
          html-type="submit"
          class="login-form-button"
          @click="login"
        >
          登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import Form from "components/common/form/Form";
import FormItem from "components/common/form/formItem/FormItem";
import { getAllTypeList } from "network/other";
import { authority } from "assets/data/nav";
import { signIn } from "network/login";
export default {
  components: {
    Form,
    FormItem,
  },
  data() {
    return {
      userId: "",
      password: "",
    };
  },
  methods: {
    keyUp(event) {
      if (event.keyCode == 13) {
        // console.log(event);
        this.login();
      }
    },

    async login() {
      //验证账号密码
      if (!this.userId || !this.password)
        return void this.$message.warning(
          `${!this.userId ? "账号" : "密码"}不能为空`,
          0.8
        );
      //登录请求
      const result = await signIn({
        username: this.userId,
        password: this.password,
      });

      if (!result.msg) return void this.$message.warning("账号或密码错误", 0.8);
      if (!authority.hasOwnProperty(result.data.type))
        return void this.$message.warning("没有登录权限");
      //保存token
      console.log(result);
      this.$store.commit("setToken", {
        token: result.data.token,
      });
      this.$store.commit("setType", {
        type: result.data.type,
      });
      this.$store.commit("setUserId", {
        userId: result.data.id,
      });

      await this.setAllTypeListToStore();

      this.toInitPage(authority[result.data.type], result.data.name);
    },

    //请求全部的类型数据
    async setAllTypeListToStore() {
      const result = await getAllTypeList();
      // console.log("跳转前", result);
      // if (!result.flag) return;
      this.$store.commit("setAllTypeList", { allTypeList: result.data });
    },

    //跳转页面
    toInitPage(power, user) {
      this.$emit("power", power);

      let targetP = power.indexOf("news") >= 0 ? "news" : power[0];
      this.$router.replace({ path: `/${targetP}` });

      //储存账号信息
      this.$store.commit("setUserName", { userName: user });

      //跳转页面
      // let p = result.data.authoritys[0];
      // let flag = result.data.authoritys.indexOf("chart") >= 0;
      // this.$router.replace({ path: `/${flag ? "chart" : p}` });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  background: url("~assets/img/4.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .login {
    width: 400px;
    margin: auto;
    text-align: center;
    background: white;
    padding: 16px 0 30px;
    border-radius: 2px;

    .form {
      width: 80%;
      margin: 0 auto;

      .input {
        margin: 10px auto;
      }

      .login-form-button {
        margin-top: 20px;
        width: 100%;
      }
    }

    .title {
      margin-top: 25px;
      margin-bottom: 30px;
      text-align: center;
      font-size: 24px;
    }
  }
}
</style>